<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>向上滚动网站促销公告</title>
<style>

body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, form, fieldset, legend, button, input, th, td {
	margin: 0;
	padding: 0;
}

body, button, input, select, textarea {
	font-family: "宋体",verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
}

ul, ol { list-style: none; }

a {
	text-decoration: none;
	color:#333;
}

a:hover {
	text-decoration: underline;
	color:#c00;
}

.right230 {
	width:230px;
	float:right;
}

/*促销*/
.note {
	background:url(images/08saleNotice_bg.png) no-repeat;
	margin:0;
	height:96px;
	width:230px;
	overflow:hidden;
}

.note h3 {
	width:230px;
	height:30px;
	text-indent:16px;
	font-size:12px;
	line-height:30px;
	color:#901008;
}

.notelist {
	width:230px;
	height:60px;
	overflow:hidden;
	margin:0 auto;
}

.note ul {
	width:200px;
	padding:0 15px;
	font-size:12px;
	line-height:30px;
}

.note ul li {
	height:30px;
	white-space:nowrap;
	width:200px;
	overflow:hidden;
}

</style>

<script type="text/javascript" language="javascript"  src="js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	note();//公告
});

//公告
function note(){
  //定义函数组
  var fns={
	  //向上
	_up : function(){
		 $(".note>div>ul").stop().animate({marginTop:"-30px"},500,
		   function(){
				$(".note>div>ul>li:lt(1)").appendTo($(".note>div>ul"));
				$(".note>div>ul").css("marginTop",0);
		 });		  
	}
  };
  
  var _autoUp = null;
  $(".note").mouseover(function(){
	  autoStop2();
  });
  
  $(".note").mouseout(function(){
	//鼠标离开后再重新恢复自动播放时间,单位毫秒
	_autoUp = setInterval(function(){fns._up() ; },1500);
  });	
  
  var autoPlay2 = function(){
	//自动播放时间,单位毫秒
	_autoUp = setInterval(function(){fns._up() ; },1500);
  };
  
  var autoStop2 = function(){
	  clearInterval(_autoUp);
	  _autoUp = null;
   };	
   
  //自动播放
  autoPlay2();
 }
</script>

</head>

<body>

<div class="note">
  <h3>促销公告</h3>
  <div class="notelist">
    <ul>
      <li><a href="#" target="_blank">新iPad Pro支持4K视频输出</a></li>
      <li><a href="#" target="_blank" class="red">谷歌推出万元x86平板 </a></li>
      <li><a href="#" target="_blank"> ROG G21迷你电竞主机发布</a></li>
      <li><a href="#" target="_blank" class="red">雷蛇近期更新两款灵刃笔记本</a></li>
    </ul>
 </div>
</div>

</body>
</html>
